<template>
  <div class="interface">
    <div class="box">
      <div style="text-align: center">
        <h1>WELCOME</h1>
      </div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        style="text-align: center"
      >
        <el-form-item prop="username">
          <span class="e">Username:</span>

          <input
            class="a"
            ref="username"
            v-model="loginForm.username"
            name="username"
            type="text"
            tabindex="1"
          />
        </el-form-item>

        <el-form-item prop="password">
          <span class="e">Password:</span>
          <input
            class="a"
            key="password"
            ref="password"
            v-model="loginForm.password"
            type="password"
            name="password"
            tabindex="2"
            @keyup.enter.native="login"
          />
        </el-form-item>

        <el-form-item class="f">
          <el-button class="b" type="primary" @click="login">Login</el-button>
          <el-button class="b" type="info" @click="resetLoginForm"
            >Reset</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        radio: [{ required: true, message: "请选择登录人员", trigger: "blur" }],
      },
    };
  },
  methods: {
    //重置登录表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    //验证密码登入
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
         
        //this.$router.push("/talentM");
        const that = this;
        this.$axios({
          method: "post",
          url: "/api/user/session",
          data:this.loginForm
        }).then(function (res) {
          if(res.data.msg=="成功"){
             window.sessionStorage.setItem("token", res.data.data['token']);//保存token到sessionStorage中
            that.$router.push('/verify');
          }else{
            that.$message({
              type: "error",
              message: "账号密码错误",
            });
          }
          
        });

      });
    },
  },
};
</script>


<style Lang="less" scoped>
.interface {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;

  background-image: url(../assets/1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
}
.box {
  width: 450px;
  height: 500px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 40px;
  transform: translate(-50%, -50%);
  background-color: #00000068;
  text-align: left;
}
.danger {
  margin: 20px;
}
h1 {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 60px;
  /* 粗细 */
  font-weight: 400;
  margin-bottom: 80px;
}
.a {
  width: 180px;
  border: 0;
  background: none;
  font-size: 15px;

  display: inline-block;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #c8d6e5;
  padding: 14px 10px;
  outline: none;
  color: #ffffff;
  border-radius: 24px;
  transition: 0.25s;
  margin-left: 40px;
}
.a:focus {
  width: 220px;
  border-color: #ffffff;
}
.b {
  border: 0;
  font-size: 17px;
  background: none;
  display: inline-block;
  margin: 20px auto;
  border: 2px solid #ffffff;

  outline: none;
  color: #ffffff;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
  width: 110px;
  margin-left: 30px;
}

.d {
  margin-top: 30px;
  margin-right: 50px;
  font-size: 18px;
  color: #8ec5fc;
  background: none;
}
.e {
  font-size: 20px;
  color: white;
}
.f {
  text-align: right;
}
</style>